<template>
<van-popup v-model="showLargessRecordPanel" class="largess-record-panel" position="right" :overlay="false" :class="{'isScoll': showDateFilter==false}">
  <van-nav-bar title="转赠记录" left-arrow @click-left="closeLargessRecordPanel" left-text="返回"></van-nav-bar>
  </van-nav-bar>
  <div class="van-cell-group van-hairline--top-bottom" @click="openDateFilterPanel">
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <span class="van-cell__text">{{ date| formatDate }}</span>
        <span class="van-cell__label">支出7123币 收入10000币</span>
      </div>
      <i class="van-icon van-cell__right-icon van-icon-description"></i>
    </div>
  </div>
  <!-- 转赠记录列表 -->
  <div class="van-cell-group van-hairline--top-bottom" >
    <div class="van-cell van-hairline" v-for="i in 10">
      <div class="van-cell__title">
        <i class="van-icon van-icon-gold-coin"> </i>
         <span class="van-cell__text">转赠-给罗总</span>
         <span class="van-cell__label">2月27 08:23</span>
       </div>
      <div class="van-cell__value"><span>-3000币</span></div>
    </div>
  </div>
  <!-- 日期过滤面板 -->
  <van-popup v-model="showDateFilter" position="bottom" :overlay="true" :prevent-scroll="true">
    <van-datetime-picker v-model="currentDate" type="date" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @confirm="getDate" @cancel="closeDateFilterPanel" />
  </van-popup>
</van-popup>
</template>
<script>
export default {
  props: ['showLargessRecordPanel'],
  data() {
    return {
      date: new Date(),
      showDateFilter: false, //是否显示日期面板
      showConditionFilter: false, // 是否显示条件筛选面板
      currentDate: new Date(2018, 1, 28),
      minHour: 10,
      maxHour: 20,
      minDate: new Date()
    }
  },
  methods: {
    closeLargessRecordPanel() {
      this.title = '交易记录';
      this.$emit('closeLargessRecordPanel');
    },
    // 显示日期过滤面板
    openDateFilterPanel() {
      this.showDateFilter = true
    },
    getDate(v) {
      this.date = v;
      this.showDateFilter = false
      // 重新加载loading 再加载一次转赠记录数据
    },
    // 关闭日期过滤面板
    closeDateFilterPanel() {
      this.showDateFilter = false
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.largess-record-panel {
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    &.isScoll{
        overflow-y: scroll;
    }
    .van-cell__value,
    .van-icon {
        color: #999127;
    }
}
</style>
